<template>
    <div>
<h2>房型列表</h2>
<table class="table table-bordered">
    <tr>
        <td>房间名称</td>
        <td>门市价</td>
        <td>房型面积</td>
        <td>可住人数</td>
        <td>介绍</td>
        <td>操作</td>
    </tr>
    <tr v-for="item in list">
        <td>{{item.hName}}</td>
        <td>{{item.money}}</td>
        <td>{{item.mianJi}}</td>
        <td>{{item.people}}</td>
        <td>{{item.ramite}}</td>
        <td><input type="button" value="删除"></td>
    </tr>
</table>
<div>
    <span>总条数{{ totalcount }}</span>
    <span>总页数{{ totalpage }}</span>
    <span>第{{ state.index }}/{{ totalpage }}</span>
    <input type="button" value="首页" @click="page('one')">
    <input type="button" value="上一页" @click="page('two')">
    <input type="button" value="下一页" @click="page('three')">
    <input type="button" value="尾页" @click="page('four')">
</div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import type { RefSymbol } from '@vue/reactivity';
const router=useRouter()
let data:any=reactive({
    state:{
index:1,
size:2
    },
    list:[],
    totalpage:0,
    totalcount:0
})
let {state,list,totalcount,totalpage}=toRefs(data)

onMounted(()=>{
    getlist()
})
const page=(str:any)=>{
    switch(str){
        case'one':
        if(state.value.index==1){
            alert("已经是第一页")
            return;
        }
        state.value.index=1;
        break;
        case'two':
        if(state.value.index==1){
          
            return;
        }
        state.value.index--;
        break;
        case'three':
        if(state.value.index==totalpage.value){
        
            return;
        }
        state.value.index++;
        break;
        case'four':
        if(state.value.index==totalpage.value){
            alert("已经是最后一页")
            return;
        }
        state.value.index=totalpage.value;
        break;
    }
    getlist()
}
const getlist=()=>{
let obj={
    index:state.value.index,
    size:state.value.size
}
axios({
        url:'/api/House/GetHouseList',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data
        totalcount.value=res.data.totalcount
        totalpage.value=res.data.totalpage
    })
    .catch(err=>{
        console.log(err)
    })
}


</script>

<style scoped>

</style>